<template>
    <z-popup :show="show" @update:show="updateShow" position="bottom" style="border-radius:24px 24px 0px 0px;">
        <van-picker v-model="modelValue" class="z-picker" :columns="columns" :title="title" @cancel="onCancel" @confirm="onConfirm" option-height="50" />
    </z-popup>
</template>
<script setup>

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    columns: {
        type: Object,
        default: {}
    },
    title: {
        type: String,
        default: ''
    },
    value: {
        type: Array,
        default: []
    },
});

const modelValue = ref(props.value)

const emits = defineEmits(['update:show', 'cancel', 'confirm']);

const updateShow = (value) => {
    emits('update:show', value);
};

const onCancel = (ev) => {
    emits('cancel', ev);
    emits('update:show', false);
}

const onConfirm = (ev) => {
    emits('confirm', ev);
}

</script>
<style scoped lang="scss">
@import './styles.scss';
</style>